import React from "react";

const ThemeContext = React.createContext( 'light')

class App extends React.Component {
  render() {
    console.log('app render');
    
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar/>
      </ThemeContext.Provider>
    )
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton  />
    </div>
  );
}

//类组件
// class ThemedButton extends React.Component {
//   //contextType是关键字
//   static contextType = ThemeContext
//   render() {
//     return <button >{this.context}</button>
//   }
// }

//函数式组件
function ThemedButton() { 
  return (
    <ThemeContext.Consumer>
      {value => <button >{value}</button>
      }
    </ThemeContext.Consumer>
  )
}

export default App;
